<template>
  <div class="app-container">
    <el-form ref="recordRef" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="姓名" prop="nickname">
        <el-input v-model="form.userId" type="hidden" />
        <el-input v-model="form.nickname" placeholder="请输入姓名" readonly />
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="form.phone" placeholder="请输入手机号" readonly />
      </el-form-item>

      <el-form-item label="标题" prop="title">
        <el-input v-model="form.title" placeholder="请输入标题" />
      </el-form-item>
      <el-form-item label="摘要" prop="description">
        <el-input
          v-model="form.description"
          type="textarea"
          :autosize="{ minRows: 10, maxRows: 20 }"
          placeholder="请输入内容"
        />
      </el-form-item>

      <el-form-item label="图片" prop="picList">
        <ImageUpload v-model="picList" :data={type:3} :limit="10" apiUrl="/common/uploadImg" />
      </el-form-item>

      <el-form-item label="就诊时间" prop="treatTime">
        <el-date-picker
          clearable
          v-model="form.treatTime"
          type="date"
          value-format="YYYY-MM-DD"
          placeholder="请选择就诊时间"
        ></el-date-picker>
      </el-form-item>

      <el-form-item label="备注" prop="remark">
        <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
      </el-form-item>
    </el-form>

    <el-form label-width="100px">
      <div style="text-align: center;margin-left:-120px;margin-top:30px;">
        <el-button type="primary" @click="submitForm()">提交</el-button>
      </div>
    </el-form>
  </div>
</template>

<script setup name="add">
import { getUser } from "@/api/mobile/patient";
import { addRecord } from "@/api/mobile/medicalrecord";
const route = useRoute();
const router = useRouter();
const { proxy } = getCurrentInstance();
const loading = ref(true);

const data = reactive({
  // 表单参数
  form: {},
  picList: []
});

const { form, picList } = toRefs(data);

(() => {
  const userId = route.params && route.params.id;
  if (userId) {
    loading.value = true;
    getUser(userId).then(response => {
      form.value.userId = response.data.id;
      form.value.nickname = response.data.nickname;
      form.value.phone = response.data.phone;
      loading.value = false;
    });
  }
})();
function submitForm() {
  console.log(form.value);
  console.log(picList.value.map(d => d.url));
  addRecord({
    ...form.value,
    picList: picList.value.map(d => d.url)
  }).then(response => {
    proxy.$modal.msgSuccess("新增成功");
    router.push("/mobile/medicalrecord");
  });
}
</script>